<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: green;

            /* 
                box-shadow属性是盒子阴影的意思，取值可以有很多中情况，我们一一来说

                当只有两个参数
                    第一个参数就是水平方向上(相对于元素左侧)的偏移量
                    第二个参数就是垂直方向上(相对于元素上侧)的偏移量

                三个参数 - 1
                    第一个参数就是水平方向上(相对于元素左侧)的偏移量
                    第二个参数就是垂直方向上(相对于元素上侧)的偏移量
                    第三个参数就是阴影的颜色

                三个参数 - 2
                    第一个参数就是水平方向上(相对于元素左侧)的偏移量
                    第二个参数就是垂直方向上(相对于元素上侧)的偏移量
                    第三个参数就是阴影的模糊度，取值和宽高这种长度单位一样，越大越模糊

                四个参数(用的多)
                    第一个参数就是水平方向上(相对于元素左侧)的偏移量
                    第二个参数就是垂直方向上(相对于元素上侧)的偏移量
                    第三个参数就是阴影的模糊度，取值和宽高这种长度单位一样，越大越模糊
                    第四个参数就是阴影的颜色

                五个参数(用得不多)
                    相比于四个参数的情况来说
                    第四个参数变成了阴影的外延，也就是向外扩大一定宽高，取值和宽高一样用px、vw什么的
                    第五个参数是阴影的颜色
                六个参数时候，相比于五个参数的在最后多出来一个，取inset将会变成内阴影
            */

            /* 两个参数 */
            /* box-shadow: 10px 10px; */

            /* 三个参数-1 */
            /* box-shadow: 10px 10px 10px; */

            /* 三个参数-2 */
            /* box-shadow: 10px 10px blue; */

            /* 四个参数 */
            /* box-shadow: 10px 10px 10px blue; */

            /* 五个参数 */
            /* box-shadow: 10px 10px 10px 20px blue; */

            /* 六个参数 */
            box-shadow: 10px 10px 10px 20px blue inset;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>